<template>
  <div class="app">
    <h2>Vue密码强度计</h2>
    <div class="input_container">
      <!-- 密码框 -->
      <input
        type="password"
        @input="input"
        v-model="password"
        placeholder="输入您的密码"
      />
      <div
        v-bind:class="{
          passLength,
          tyt,
        }"
        class="password_length"
      >
        {{ passlength }}
      </div>
    </div>
    <!-- 字母 数字 大写字母 -->
    <div class="lnu_container">
      <p v-bind:class="{ zmpass: zmpassword }">字母</p>
      <p v-bind:class="{ numpass: numpassword }">数字</p>
      <p v-bind:class="{ dxpass: dxpassword }">大写字母</p>
    </div>
    <div class="content" v-bind:class="{ showpass: valid_password }">
      <svg viewBox="0 0 140 100">
        <path
          class="tick"
          v-bind:class="{ checked: valid_password }"
          d="M10,50 l25,40 l95,-70"
        />
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      password: null,
      passlength: 0,
      tyt: false,
      zmpassword: false,
      numpassword: false,
      dxpassword: false,
      passLength: false,
      valid_password: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 输入框事件
    input() {
      // 输入框的长度等于显示的数量
      this.passlength = this.password.length;
      // 判断大于7就为true显示否则false
      if (this.passlength > 7) {
        this.passLength = true;
      } else {
        this.passLength = false;
      }
      if (this.passlength > 0) {
        this.tyt = true;
      } else {
        this.tyt = false;
      }
      // 正则验证
      this.zmpassword = /[a-z]/.test(this.password);
      this.numpassword = /\d/.test(this.password);
      this.dxpassword = /[A-Z]/.test(this.password);
      // 检查输入密码是否有效
      if (this.zmpassword == true && this.numpassword == true) {
        this.valid_password = false;
        if (this.dxpassword == true && this.passLength == true)
          this.valid_password = true;
      } else {
        this.valid_password = false;
      }
    },
  },
};
</script>
<style scoped lang='scss'>
.app {
  width: 350px;
  padding: 10px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 20%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.app input {
  width: 320px;
  height: auto;
  border: 1px solid transparent;
  background: #eeeeee;
  color: #475762;
  font-size: 15px;
  border-radius: 4px;
  padding: 12px 5px;
  overflow: hidden;
  outline: none;
  transition: all 0.1s;
}

.app input:focus {
  border: 1px solid #2196f3;
}
.app h2 {
  font-size: 25px;
  color: #475762;
  text-align: center;
  margin-bottom: 20px;
}
.input_container {
  display: block;
  margin: 0 auto;
  width: 320px;
  height: auto;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.lnu_container {
  display: block;
  margin: 10px auto;
  width: 320px;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.lnu_container p {
  width: 100px;
  height: auto;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  border-radius: 2px;
  color: rgba(71, 87, 98, 0.8);
  background: -webkit-linear-gradient(left, #00ad7c 50%, #eee 50%);
  background: linear-gradient(to right, #00ad7c 50%, #eee 50%);
  background-size: 201% 100%;
  background-position: right;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}
.zmpass,
.numpass,
.dxpass {
  background-position: left !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.content {
  display: block;
  margin: 10px auto;
  border-radius: 4px;
  position: relative;
  background: #00ad7c;
  width: 20px;
  height: 20px;
  visibility: hidden;
  opacity: 0;
}
.showpass {
  visibility: visible;
  opacity: 1;
}
.tick {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: white;
  stroke-width: 25;
}
.checked {
  -webkit-animation: hour 0.5s ease forwards;
  animation: hour 0.5s ease forwards;
}
@-webkit-keyframes hour {
  to {
    stroke-dashoffset: 0;
  }
}
// 动画
@keyframes hour {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
